<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0,user-scalable=no"
        />
        <title>考文是风 - 专业的网站开发、小程序开发与Flutter应用开发</title>
        <link
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
            rel="stylesheet"
        />
        <link rel="stylesheet" href="./styles/style.css" />
    </head>
    <body class="font-sans bg-gray-50 text-gray-800">
        <!-- 导航栏 -->
        <nav class="bg-white shadow-md sticky top-0 z-50">
            <div class="container mx-auto px-6 py-3">
                <div class="flex justify-between items-center">
                    <div class="flex items-center">
                        <a
                            href="#home"
                            class="text-2xl font-bold text-blue-600 flex items-center"
                        >
                            <i class="fas fa-code mr-2"></i>
                            考文是风
                        </a>
                    </div>
                    <!-- 菜单 -->
                    <div class="hidden md:flex space-x-8">
                        <a
                            href="#home"
                            class="text-blue-600 hover:text-blue-800 font-medium"
                            >首页</a
                        ><a
                            href="#service"
                            class="hover:text-blue-800 font-medium"
                            >服务</a
                        ><a href="#case" class="hover:text-blue-800 font-medium"
                            >案例</a
                        ><a
                            href="#about"
                            class="hover:text-blue-800 font-medium"
                            >关于我们</a
                        ><a
                            href="#contact"
                            class="hover:text-blue-800 font-medium"
                            >联系我们</a
                        >
                    </div>
                    <!-- 菜单按钮 -->
                    <button
                        id="toggle-button"
                        class="md:hidden focus:outline-none"
                    >
                        <i class="fas fa-bars text-xl"></i>
                    </button>
                </div>
                <!-- 移动端菜单 -->
                <div id="mobile-menu" class="md:hidden py-0">
                    <a
                        href="#home"
                        class="block px-6 py-3 text-blue-600 font-medium border-b border-gray-100"
                        >首页</a
                    >
                    <a
                        href="#service"
                        class="block px-6 py-3 hover:text-blue-600 font-medium border-b border-gray-100"
                        >服务</a
                    >
                    <a
                        href="#case"
                        class="block px-6 py-3 hover:text-blue-600 font-medium border-b border-gray-100"
                        >案例</a
                    >
                    <a
                        href="#about"
                        class="block px-6 py-3 hover:text-blue-600 font-medium border-b border-gray-100"
                        >关于我们</a
                    >
                    <a
                        href="#contact"
                        class="block px-6 py-3 hover:text-blue-600 font-medium"
                        >联系我们</a
                    >
                </div>
            </div>
        </nav>
        <!-- header部分 -->
        <header id="home" class="py-32 md:py-48 text-white header">
            <div class="container mx-auto px-6 text-center relative z-1">
                <h1 class="text-4xl md:text-6xl font-bold mb-6">
                    考文是风，引领未来
                </h1>
                <p class="text-xl md:text-2xl mb-12 max-w-3xl mx-auto">
                    专业提供网站开发、小程序开发与Flutter跨平台应用开发服务，助力企业数字化转型
                </p>
                <div class="flex flex-col sm:flex-row justify-center gap-6">
                    <a
                        href="#contact"
                        class="bg-white text-blue-600 px-8 py-3 rounded-full font-semibold"
                    >
                        <i class="fas fa-envelope mr-2"></i>免费咨询
                    </a>
                    <a
                        href="#case"
                        class="border px-8 py-3 rounded-full font-semibold"
                    >
                        <i class="fas fa-laptop-code mr-2"></i>查看案例
                    </a>
                </div>
            </div>
        </header>
        <!-- 服务 -->
        <section id="service" class="py-20 bg-white">
            <div class="container mx-auto px-6">
                <div class="text-center mb-16">
                    <h2 class="text-3xl md:text-4xl font-bold mb-4">
                        我们的专业服务
                    </h2>
                    <p class="text-gray-600 max-w-2xl mx-auto">
                        提供全方位的数字解决方案，从网站到移动应用，满足您的各种业务需求
                    </p>
                </div>
                <div class="grid md:grid-cols-3 gap-10">
                    <div
                        class="bg-gray-50 p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300"
                    >
                        <div class="text-blue-500 mb-6">
                            <i class="fas fa-globe text-5xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold mb-4">网站开发</h3>
                        <p class="text-gray-600 mb-6">
                            我们打造响应式、高性能的企业网站和电商平台，使用最新技术确保您的网站在所有设备上都有完美表现。
                        </p>
                        <ul class="space-y-3 text-gray-600">
                            <li class="flex items-center">
                                <i
                                    class="fas fa-check-circle text-green-500 mr-3"
                                ></i>
                                企业官网开发
                            </li>
                            <li class="flex items-center">
                                <i
                                    class="fas fa-check-circle text-green-500 mr-3"
                                ></i>
                                电商平台搭建
                            </li>
                            <li class="flex items-center">
                                <i
                                    class="fas fa-check-circle text-green-500 mr-3"
                                ></i>
                                CMS内容管理系统
                            </li>
                            <li class="flex items-center">
                                <i
                                    class="fas fa-check-circle text-green-500 mr-3"
                                ></i>
                                定制Web应用
                            </li>
                        </ul>
                    </div>
                    <div
                        class="bg-gray-50 p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300"
                    >
                        <div class="text-blue-500 mb-6">
                            <i class="fas fa-mobile-alt text-5xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold mb-4">网站开发</h3>
                        <p class="text-gray-600 mb-6">
                            我们打造响应式、高性能的企业网站和电商平台，使用最新技术确保您的网站在所有设备上都有完美表现。
                        </p>
                        <ul class="space-y-3 text-gray-600">
                            <li class="flex items-center">
                                <i
                                    class="fas fa-check-circle text-green-500 mr-3"
                                ></i>
                                企业官网开发
                            </li>
                            <li class="flex items-center">
                                <i
                                    class="fas fa-check-circle text-green-500 mr-3"
                                ></i>
                                电商平台搭建
                            </li>
                            <li class="flex items-center">
                                <i
                                    class="fas fa-check-circle text-green-500 mr-3"
                                ></i>
                                CMS内容管理系统
                            </li>
                            <li class="flex items-center">
                                <i
                                    class="fas fa-check-circle text-green-500 mr-3"
                                ></i>
                                定制Web应用
                            </li>
                        </ul>
                    </div>
                    <div
                        class="bg-gray-50 p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300"
                    >
                        <div class="text-blue-500 mb-6">
                            <svg class="w-12 h-12" viewBox="0 0 128 128">
                                <path
                                    fill="#00A6ED"
                                    d="M12.3 64.2L76.3 0h39.4L32.1 83.6zM76.3 128h39.4L81.6 93.9l34.1-34.8H76.3L42.2 93.5z"
                                ></path>
                            </svg>
                        </div>
                        <h3 class="text-2xl font-bold mb-4">小程序开发</h3>
                        <p class="text-gray-600 mb-6">
                            我们开发各平台小程序，帮助企业在移动互联网时代快速触达用户，提升用户体验和转化率。
                        </p>
                        <ul class="space-y-3 text-gray-600">
                            <li class="flex items-center">
                                <i
                                    class="fas fa-check-circle text-green-500 mr-3"
                                ></i>
                                微信小程序开发
                            </li>
                            <li class="flex items-center">
                                <i
                                    class="fas fa-check-circle text-green-500 mr-3"
                                ></i>
                                支付宝小程序开发
                            </li>
                            <li class="flex items-center">
                                <i
                                    class="fas fa-check-circle text-green-500 mr-3"
                                ></i>
                                百度智能小程序开发
                            </li>
                            <li class="flex items-center">
                                <i
                                    class="fas fa-check-circle text-green-500 mr-3"
                                ></i>
                                多平台兼容解决方案
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
        <!-- 案例 -->
        <section id="case" class="py-20 bg-gray-50">
            <div class="container mx-auto px-6">
                <div class="text-center mb-16">
                    <h2 class="text-3xl md:text-4xl font-bold mb-4">
                        成功案例
                    </h2>
                    <p class="text-gray-600 max-w-2xl mx-auto">
                        我们为各行业客户提供了专业的数字解决方案，以下是部分精选案例
                    </p>
                </div>
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <div
                        class="portfolio-item bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition duration-300"
                    >
                        <img
                            src="./assets/example-1.avif"
                            alt="电商平台"
                            class="w-full h-56 object-cover"
                        />
                        <div class="p-6">
                            <h3 class="text-xl font-bold mb-2">
                                某知名电商平台
                            </h3>
                            <p class="text-gray-600 mb-4">
                                开发了完整的电商解决方案，包括网站、移动应用和小程序，实现了跨平台无缝体验。
                            </p>
                            <div class="flex flex-wrap gap-2">
                                <span
                                    class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full"
                                    >网站开发</span
                                >
                                <span
                                    class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full"
                                    >小程序</span
                                >
                                <span
                                    class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full"
                                    >Flutter</span
                                >
                            </div>
                        </div>
                    </div>
                    <div
                        class="portfolio-item bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition duration-300"
                    >
                        <img
                            src="./assets/example-2.avif"
                            alt="教育平台"
                            class="w-full h-56 object-cover"
                        />
                        <div class="p-6">
                            <h3 class="text-xl font-bold mb-2">在线教育平台</h3>
                            <p class="text-gray-600 mb-4">
                                开发了包含直播、点播、互动问答等功能的在线教育平台，支持多端访问。
                            </p>
                            <div class="flex flex-wrap gap-2">
                                <span
                                    class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full"
                                    >网站开发</span
                                >
                                <span
                                    class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full"
                                    >小程序</span
                                >
                                <span
                                    class="bg-yellow-100 text-yellow-800 text-xs px-3 py-1 rounded-full"
                                    >直播系统</span
                                >
                            </div>
                        </div>
                    </div>
                    <div
                        class="portfolio-item bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition duration-300"
                    >
                        <img
                            src="./assets/example-3.avif"
                            alt="企业应用"
                            class="w-full h-56 object-cover"
                        />
                        <div class="p-6">
                            <h3 class="text-xl font-bold mb-2">企业CRM系统</h3>
                            <p class="text-gray-600 mb-4">
                                使用Flutter开发的跨平台企业CRM应用，提升了销售团队的工作效率和客户管理能力。
                            </p>
                            <div class="flex flex-wrap gap-2">
                                <span
                                    class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full"
                                    >Flutter</span
                                >
                                <span
                                    class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full"
                                    >后端开发</span
                                >
                                <span
                                    class="bg-red-100 text-red-800 text-xs px-3 py-1 rounded-full"
                                    >数据可视化</span
                                >
                            </div>
                        </div>
                    </div>
                </div>
                <div class="text-center mt-12">
                    <a
                        href="#"
                        class="inline-block bg-blue-600 text-white px-8 py-3 rounded-full font-semibold hover:bg-blue-700 transition duration-300 shadow-lg hover:shadow-xl"
                    >
                        <i class="fas fa-eye mr-2"></i>查看更多案例
                    </a>
                </div>
            </div>
        </section>
        <!-- 关于我们 -->
        <section id="about" class="py-20 bg-white">
            <div class="container mx-auto px-6">
                <div class="flex flex-col md:flex-row items-center">
                    <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
                        <h2 class="text-3xl md:text-4xl font-bold mb-6">
                            关于考文是风
                        </h2>
                        <p class="text-gray-600 mb-6">
                            上海考文是风信息科技有限公司成立于2024年，是一家专注于数字解决方案的高科技企业。我们拥有一支由资深开发工程师、UI/UX设计师和产品经理组成的专业团队。
                        </p>
                        <p class="text-gray-600 mb-6">
                            多年来，我们已为超过200家企业提供了优质的开发服务，涵盖金融、教育、电商、医疗等多个行业领域。
                        </p>
                        <div class="grid grid-cols-2 gap-4">
                            <div
                                class="bg-blue-50 p-4 rounded-lg border border-blue-100"
                            >
                                <div
                                    class="text-blue-600 text-3xl font-bold mb-2"
                                >
                                    200+
                                </div>
                                <div class="text-gray-600">成功项目</div>
                            </div>
                            <div
                                class="bg-blue-50 p-4 rounded-lg border border-blue-100"
                            >
                                <div
                                    class="text-blue-600 text-3xl font-bold mb-2"
                                >
                                    50+
                                </div>
                                <div class="text-gray-600">专业团队</div>
                            </div>
                            <div
                                class="bg-blue-50 p-4 rounded-lg border border-blue-100"
                            >
                                <div
                                    class="text-blue-600 text-3xl font-bold mb-2"
                                >
                                    8年
                                </div>
                                <div class="text-gray-600">行业经验</div>
                            </div>
                            <div
                                class="bg-blue-50 p-4 rounded-lg border border-blue-100"
                            >
                                <div
                                    class="text-blue-600 text-3xl font-bold mb-2"
                                >
                                    98%
                                </div>
                                <div class="text-gray-600">客户满意度</div>
                            </div>
                        </div>
                    </div>
                    <div class="md:w-1/2">
                        <img
                            src="./assets/example-4.avif"
                            alt="我们的团队"
                            class="rounded-xl shadow-lg w-full"
                        />
                    </div>
                </div>
            </div>
        </section>
        <!-- 我们的技术栈 -->
        <section class="py-16 bg-gray-100">
            <div class="container mx-auto px-6">
                <h2 class="text-3xl font-bold text-center mb-12">
                    我们的技术栈
                </h2>
                <div class="flex flex-wrap justify-center gap-8 md:gap-12">
                    <div class="text-center">
                        <div
                            class="bg-white p-4 rounded-full shadow-md w-20 h-20 flex items-center justify-center mx-auto mb-3 hover:transform hover:scale-110 transition duration-300"
                        >
                            <i class="fab fa-react text-4xl text-blue-500"></i>
                        </div>
                        <span class="text-gray-700 font-medium">React</span>
                    </div>
                    <div class="text-center">
                        <div
                            class="bg-white p-4 rounded-full shadow-md w-20 h-20 flex items-center justify-center mx-auto mb-3 hover:transform hover:scale-110 transition duration-300"
                        >
                            <i class="fab fa-vuejs text-4xl text-green-500"></i>
                        </div>
                        <span class="text-gray-700 font-medium">Vue.js</span>
                    </div>
                    <div class="text-center">
                        <div
                            class="bg-white p-4 rounded-full shadow-md w-20 h-20 flex items-center justify-center mx-auto mb-3 hover:transform hover:scale-110 transition duration-300"
                        >
                            <!-- 使用SVG替代Font Awesome图标 -->
                            <svg class="w-10 h-10" viewBox="0 0 128 128">
                                <path
                                    fill="#02569B"
                                    d="M12.3 64.2L76.3 0h39.4L32.1 83.6zM76.3 128h39.4L81.6 93.9l34.1-34.8H76.3L42.2 93.5z"
                                ></path>
                            </svg>
                        </div>
                        <span class="text-gray-700 font-medium">Flutter</span>
                    </div>
                    <div class="text-center">
                        <div
                            class="bg-white p-4 rounded-full shadow-md w-20 h-20 flex items-center justify-center mx-auto mb-3 hover:transform hover:scale-110 transition duration-300"
                        >
                            <i
                                class="fab fa-node-js text-4xl text-green-600"
                            ></i>
                        </div>
                        <span class="text-gray-700 font-medium">Node.js</span>
                    </div>
                    <div class="text-center">
                        <div
                            class="bg-white p-4 rounded-full shadow-md w-20 h-20 flex items-center justify-center mx-auto mb-3 hover:transform hover:scale-110 transition duration-300"
                        >
                            <i
                                class="fab fa-weixin text-4xl text-green-500"
                            ></i>
                        </div>
                        <span class="text-gray-700 font-medium"
                            >微信小程序</span
                        >
                    </div>
                </div>
            </div>
        </section>
        <!-- 联系我们 -->
        <section id="contact" class="py-20 bg-blue-600 text-white">
            <div class="container mx-auto px-6">
                <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">
                    联系我们
                </h2>
                <div class="flex flex-col md:flex-row gap-10">
                    <div class="md:w-1/2">
                        <h3 class="text-2xl font-bold mb-6">
                            立即开启您的数字之旅
                        </h3>
                        <p class="mb-8 text-lg">
                            无论您有任何关于网站、小程序或移动应用开发的需求，我们的专业团队都乐意为您提供咨询和服务。
                        </p>

                        <div class="space-y-6">
                            <div class="flex items-start">
                                <i
                                    class="fas fa-map-marker-alt mt-1 mr-4 text-xl"
                                ></i>
                                <div>
                                    <h4 class="font-semibold text-lg">
                                        公司地址
                                    </h4>
                                    <p>
                                        中国（上海）自由贸易区临港新片区丽正路1628号4幢1-2层
                                    </p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <i
                                    class="fas fa-phone-alt mt-1 mr-4 text-xl"
                                ></i>
                                <div>
                                    <h4 class="font-semibold text-lg">
                                        联系电话
                                    </h4>
                                    <p>18621576365</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <i
                                    class="fas fa-envelope mt-1 mr-4 text-xl"
                                ></i>
                                <div>
                                    <h4 class="font-semibold text-lg">
                                        电子邮箱
                                    </h4>
                                    <p>
                                        <a href="mailto:cowen_zheng@163.com"
                                            >cowen_zheng@163.com</a
                                        >
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="mt-8 flex space-x-4">
                            <a
                                href="#"
                                class="bg-white text-blue-600 w-12 h-12 rounded-full flex items-center justify-center hover:bg-blue-50 transition duration-300 text-xl"
                            >
                                <i class="fab fa-weixin"></i>
                            </a>
                            <a
                                href="#"
                                class="bg-white text-blue-600 w-12 h-12 rounded-full flex items-center justify-center hover:bg-blue-50 transition duration-300 text-xl"
                            >
                                <i class="fab fa-weibo"></i>
                            </a>
                            <a
                                href="#"
                                class="bg-white text-blue-600 w-12 h-12 rounded-full flex items-center justify-center hover:bg-blue-50 transition duration-300 text-xl"
                            >
                                <i class="fab fa-github"></i>
                            </a>
                            <a
                                href="#"
                                class="bg-white text-blue-600 w-12 h-12 rounded-full flex items-center justify-center hover:bg-blue-50 transition duration-300 text-xl"
                            >
                                <i class="fab fa-linkedin"></i>
                            </a>
                        </div>
                    </div>

                    <div class="md:w-1/2">
                        <form
                            class="bg-white rounded-xl shadow-lg p-8 text-gray-800"
                        >
                            <h3 class="text-2xl font-bold mb-6">发送消息</h3>
                            <div class="space-y-4">
                                <div>
                                    <label
                                        for="name"
                                        class="block mb-2 font-medium"
                                        >您的姓名</label
                                    >
                                    <input
                                        type="text"
                                        id="name"
                                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                                    />
                                </div>
                                <div>
                                    <label
                                        for="email"
                                        class="block mb-2 font-medium"
                                        >电子邮箱</label
                                    >
                                    <input
                                        type="email"
                                        id="email"
                                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                                    />
                                </div>
                                <div>
                                    <label
                                        for="phone"
                                        class="block mb-2 font-medium"
                                        >联系电话</label
                                    >
                                    <input
                                        type="tel"
                                        id="phone"
                                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                                    />
                                </div>
                                <div>
                                    <label
                                        for="message"
                                        class="block mb-2 font-medium"
                                        >项目需求</label
                                    >
                                    <textarea
                                        id="message"
                                        rows="4"
                                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                                    ></textarea>
                                </div>
                                <button
                                    type="submit"
                                    class="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 transition duration-300 mt-4"
                                >
                                    <i class="fas fa-paper-plane mr-2"></i
                                    >发送消息
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
        <!-- 页脚 -->
        <footer class="bg-gray-900 text-white py-12">
            <div class="container mx-auto px-6">
                <div class="grid md:grid-cols-4 gap-8">
                    <div>
                        <h3 class="text-xl font-bold mb-4 flex items-center">
                            <i class="fas fa-code mr-2"></i>
                            考文是风
                        </h3>
                        <p class="text-gray-400">
                            专业的网站开发、小程序开发和Flutter应用开发服务提供商，助力企业数字化转型。
                        </p>
                    </div>
                    <div>
                        <h4 class="font-bold mb-4 text-lg">服务</h4>
                        <ul class="space-y-2 text-gray-400">
                            <li>
                                <a
                                    href="#"
                                    class="hover:text-white transition duration-300"
                                    >网站开发</a
                                >
                            </li>
                            <li>
                                <a
                                    href="#"
                                    class="hover:text-white transition duration-300"
                                    >小程序开发</a
                                >
                            </li>
                            <li>
                                <a
                                    href="#"
                                    class="hover:text-white transition duration-300"
                                    >Flutter开发</a
                                >
                            </li>
                            <li>
                                <a
                                    href="#"
                                    class="hover:text-white transition duration-300"
                                    >UI/UX设计</a
                                >
                            </li>
                            <li>
                                <a
                                    href="#"
                                    class="hover:text-white transition duration-300"
                                    >技术咨询</a
                                >
                            </li>
                        </ul>
                    </div>
                    <div>
                        <h4 class="font-bold mb-4 text-lg">关于</h4>
                        <ul class="space-y-2 text-gray-400">
                            <li>
                                <a
                                    href="#"
                                    class="hover:text-white transition duration-300"
                                    >公司简介</a
                                >
                            </li>
                            <li>
                                <a
                                    href="#"
                                    class="hover:text-white transition duration-300"
                                    >团队介绍</a
                                >
                            </li>
                            <li>
                                <a
                                    href="#"
                                    class="hover:text-white transition duration-300"
                                    >成功案例</a
                                >
                            </li>
                            <li>
                                <a
                                    href="#"
                                    class="hover:text-white transition duration-300"
                                    >加入我们</a
                                >
                            </li>
                            <li>
                                <a
                                    href="#"
                                    class="hover:text-white transition duration-300"
                                    >博客</a
                                >
                            </li>
                        </ul>
                    </div>
                    <div>
                        <h4 class="font-bold mb-4 text-lg">订阅我们</h4>
                        <p class="text-gray-400 mb-4">
                            订阅我们的新闻通讯，获取最新技术和行业动态。
                        </p>
                        <div class="flex">
                            <input
                                type="email"
                                placeholder="您的邮箱"
                                class="px-4 py-3 bg-white rounded-l-lg focus:outline-none text-gray-800 w-full"
                            />
                            <button
                                class="bg-blue-600 px-6 py-3 rounded-r-lg hover:bg-blue-700 transition duration-300"
                            >
                                <i class="fas fa-paper-plane"></i>
                            </button>
                        </div>
                        <div class="mt-4 text-gray-400 text-sm">
                            <i class="fas fa-lock mr-2"></i>我们承诺保护您的隐私
                        </div>
                    </div>
                </div>
                <div
                    class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"
                >
                    <p>© 2024 上海考文是风信息科技有限公司.保留所有权利.</p>
                </div>
            </div>
        </footer>
        <script type="module" src="./main.js"></script>
    </body>
</html>
